<template>
  <div>
    <vCommonPage :title="$route.query.pageTitle">
      <template slot="customContent">
        <el-container>
          <el-main>
            <template v-if="!finished">
              <div v-if="!hasInit">
                <el-row style="font-size: 32px">
                  您的就诊类型是?
                </el-row>
                <el-row>
                  <el-radio-group v-model="templateId" size="large" @change="fetchQuestion">
                    <el-radio-button label="50b095cf-28c3-44a9-8bf0-05977717a484">住院</el-radio-button>
                    <el-radio-button label="92ee37f9-8b68-43ec-a2f2-b727a46bb56d">门诊</el-radio-button>
                  </el-radio-group>
                </el-row>
                <!--                <el-row>-->
                <!--                  <el-button :disabled="templateId === ''" @click.native="fetchQuestion">下一步</el-button>-->
                <!--                </el-row>-->
              </div>
              <div class="panel-container" v-else>
                <div class="progress">
                  <el-progress :text-inside="true" :stroke-width="36" :percentage="percentage"
                               status="success"></el-progress>
                </div>
                <el-carousel ref="panel" height="420px" :autoplay="false" arrow="never" :loop="false"
                             indicator-position="none">
                  <el-carousel-item v-for="(item,index) in questionList" :key="item.id">
                    <div class="question-container">
                      <div class="title">
                        <span v-if="item.isRequired === 1" style="color: red">*</span>
                        <span>{{ index + 1 }}.{{ item.questionTitle }}</span>
                      </div>
                      <template v-if="item.questionType === 1">
                        <div class="radio-group">
                          <el-radio v-for="(option) in item.questionOptions" border v-model="answerList[index].value"
                                    @change="(e) => calcPercentage(index)" :label="option" :key="option"></el-radio>
                        </div>
                      </template>
                      <template v-else-if="item.questionType === 2">
                        <el-checkbox v-for="(option) in item.questionOptions" :key="option" :label="option"
                                     border></el-checkbox>
                      </template>
                      <template v-else-if="item.questionType === 3">
                        <div style="margin-top: 20px">
                          <el-input v-model="answerList[index].value" :placeholder="item.placeholder"></el-input>
                        </div>
                      </template>
                    </div>
                  </el-carousel-item>
                </el-carousel>
                <div class="panel-footer-btn-group">
                  <div class="page-btn-container">
                    <el-button class="page-btn" round type="primary" size="large" @click.native="prev">上一页</el-button>
                    <el-button class="page-btn" round type="success" size="large" @click.native="next">下一页</el-button>
                  </div>
                  <el-button class="submit-btn" round type="danger" size="large" @click.native="submit">提交</el-button>
                </div>
              </div>
            </template>
            <template v-else>
              <div class="success-container">
                <div class="icon">
                  <i class="el-icon-check"/>
                </div>
                <div>
                  满意度调查报告提交成功
                </div>
                <el-button plain class="return-btn" type="success" @click.native="finish">完成</el-button>
              </div>
            </template>
          </el-main>
        </el-container>
      </template>
    </vCommonPage>
  </div>
</template>

<script>
import {getPaper,submit} from "@api/apiBox/myddc";

export default {
  data() {
    return {
      curIndex: 0,
      percentage: 0,
      templateId: '',
      hasInit: false,
      finished: false,
      questionList: [],
      answerList: [],
    }
  },
  methods: {
    async fetchQuestion() {
      const  _this=this
      let data = {
        data: {
          templateId:"92ee37f9-8b68-43ec-a2f2-b727a46bb56d",
          hospitalId:"xm001"
        },
        that: _this
      };
      const res = await getPaper(data);
      console.log(res)
      const answerList = []
      res.data.forEach(q => {
        const questionId = q.id;
        const isRequired = q.isRequired;
        const hospitalId = "xm001";
        const answer = {questionId, isRequired,hospitalId}
        answerList.push(answer);
        const type = q.questionType;
        if (type === 1 || type === 2) {
          q.questionOptions = JSON.parse(q.questionOptions)
        }
      });
      this.answerList = answerList;
      this.questionList = res.data;
      this.hasInit = true
    },
    prev() {
      if (this.curIndex <= 0) {
        this.$alert('已经是第一页了', '提示', {
          confirmButtonText: '确定',
        });
      } else {
        this.curIndex--;
        this.$refs.panel.prev()
      }
    },
    next() {
      const max = this.questionList.length;
      if (this.curIndex + 1 >= max) {
        this.$alert('已经是最后一页了', '提示', {
          confirmButtonText: '确定',
        });
      } else {
        this.curIndex++;
        this.$refs.panel.next()
      }
    },
    async submit() {
      for (let i = 0; i < this.answerList.length; i++) {
        if (!this.answerList[i].isRequired) {
          continue;
        }
        if (!this.answerList[i].value) {
          this.$refs.panel.setActiveItem(i);
          this.$message.warning(`请填写第${i + 1}题`);
          break;
        }
      }
      let data = {
        data: {
          templateId:"92ee37f9-8b68-43ec-a2f2-b727a46bb56d",
          hospitalId:"xm001",
          answerItems: this.answerList
        },
      }
      const res = await submit(data);
      if (res.message !== 'SUCCESS') {
        this.$alert(res.message, '提示', {
          confirmButtonText: '确定',
        });
        if (typeof (res.data) === 'number') {
          this.$refs.panel.setActiveItem(res.data - 1);
        }
      } else {
        this.finished = true;
      }
    },
    calcPercentage(index) {
      console.log(index);
      if (this.answerList[index].isRequired === 1) {
        let cur = 0, total = 0;
        this.answerList.forEach(a => {
          if (a.isRequired === 1) {
            total++;
            if (a.value) {
              cur++;
            }
          }
        });
        if (total === 0) {
          this.percentage = 100;
        } else {
          this.percentage = parseInt((cur / total * 100).toFixed(0), 10);
        }
      }
    },
    finish() {
      this.$router.replace({name: 'home'})
    }
  },
  created() {
  }
}
</script>

<style scoped>
.el-row {
  margin-top: 20px;
  text-align: center;
}

.el-container {
  width: 100%;
}


/deep/.el-radio.is-bordered {
  height: auto;
  padding: 16px 30px;
  background: #FFF;
}

/deep/.el-radio__inner {
  width: 20px;
  height: 20px;
}

/deep/.el-radio__inner::after {
  width: 8px;
  height: 8px;
}

/deep/.el-radio__label {
  font-size: 24px;
}

/deep/.el-radio-button {
  background: #FFF;
}

/deep/.el-radio-button__inner {
  font-size: 24px;
  padding: 20px 100px;
}

/deep/.el-radio {
  width: 100%;
  text-align: left;
  margin-top: 12px;
  margin-right: 0;
}

/deep/.el-radio.is-bordered + .el-radio.is-bordered {
  margin-left: 0;
}


.progress {
  margin-bottom: 30px;
}

.panel-container {
  width: 100%;
  font-size: 32px;
}

.question-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.title {
  text-align: center;
}

.radio-group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 300px;
}

.panel-footer-btn-group {
  padding: 0 20%;
  margin-top: 20px;
}

.page-btn-container {
  display: flex;
  justify-content: space-between;
}

.page-btn {
  width: 48%;
  font-size: 24px;
  padding: 20px;
  margin-left: 0;
}

.submit-btn {
  width: 100%;
  font-size: 24px;
  padding: 20px;
  margin-top: 20px;
}

.success-container {
  display: flex;
  flex-direction: column;
  font-size: 32px;
  justify-content: space-between;
  align-items: center;
  height: 300px;
}

.icon {
  font-size: 128px;
  color: white;
  background: mediumspringgreen;
  width: 128px;
  border-radius: 100%;
  height: 128px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.return-btn {
  font-size: 24px;
  width: 200px;
  padding: 12px;
}


</style>
